<template>
  <div class="device-page">
    <!-- 上部分布局：左信息卡 + 右图表 -->
    <div class="top-section">
      <!-- 左边设备状态 -->
      <el-card class="device-card">
        <div class="device-header">
          <div class="device-name">MAU1</div>
          <el-tag type="success">运行中</el-tag>
        </div>
        <el-divider />
        <div class="device-info">
          <div class="info-item">温度：26℃</div>
          <div class="info-item">湿度：45%</div>
          <div class="info-item">电流：2.3A</div>
          <div class="info-item">功率：1.5kW</div>
        </div>
      </el-card>

      <!-- 右边趋势图 -->
      <el-card class="chart-card">
        <div class="chart-title">温度趋势图</div>
        <div ref="chart" class="chart"></div>
      </el-card>
    </div>

    <!-- 下部分运行参数列表 -->
    <el-card class="param-card">
      <div class="param-title">运行参数</div>
      <el-table :data="params" border>
        <el-table-column prop="name" label="参数名称" />
        <el-table-column prop="value" label="当前状态" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "DevicePage",
  data() {
    return {
      params: [
        { name: '送风压差故障自保', value: '关' },
        { name: '设备排风启停状态', value: '开' },
        { name: '百级探头故障', value: '关' }
      ],
      chartData: [25.1, 25.5, 26.0, 26.2, 26.5, 26.4]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart)
      chart.setOption({
        title: { text: '' },
        xAxis: {
          type: 'category',
          data: ['10:00', '10:05', '10:10', '10:15', '10:20', '10:25']
        },
        yAxis: {
          type: 'value',
          name: '℃'
        },
        series: [{
          data: this.chartData,
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      })
    }
  }
}
</script>

<style scoped>
.device-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.top-section {
  display: flex;
  gap: 20px;
}
.device-card {
  flex: 1;
}
.chart-card {
  flex: 2;
}
.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.device-info {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.info-item {
  width: 120px;
}
.chart {
  width: 100%;
  height: 300px;
}
.param-card {
  margin-top: 10px;
}
.param-title {
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
